<template>
  <div>
    <el-container style="height: 100%; border: 1px solid #eee">
      <el-aside width="200px">
       <el-tree :data="carList" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
      </el-aside>
      <el-container>
        <el-main>
          <TopFilter :list="topFilterList" :cols="3" @filterChange="changeHandle" :labelWidth="110"></TopFilter>
          <FilterTable
            ref="table"
            :columns="columns"
            :fetchapi="fetchApi"
            :params="fetchParams"
            :selectionType="'single'"
            :datakey="'records'"
            :defaultSelections="defaultList"
            :onRowSelectChange="selectChangeHandle"
            :onSyncTableData="SyncTableData"
            :onColumnsChange="(columns) => (this.columns = columns)"
          >
          </FilterTable>
          <div style="height: 47px"></div>
          <div
            :style="{
              position: 'absolute',
              left: 0,
              bottom: 0,
              right: 0,
              zIndex: 9,
              borderTop: '1px solid #e9e9e9',
              padding: '10px 20px',
              background: '#fff',
              textAlign: 'right',
            }"
          >
            <el-button @click="closeDrawer(1)">取 消</el-button>
            <!-- <el-button @click="closeDrawer(2)" type="primary" :disabled="isOpen">确 定</el-button> -->
            <multiuse-button type="primary" :click="closeDrawer.bind(this, 2)" :disabled="isOpen">确 定</multiuse-button>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import { getCarList, vehicleConfiguration } from '@/api/dealerSaleP/OrderManagement/OrderSubmission/index.js';
export default {
  data() {
    this.table = null;
    return {
      topFilterList: this.createdFrom(),
      columns: this.createdTable(),
      fetchParams: {
        dealerCode: this.carData.dealerCode,
      },
      fetchApi: getCarList,
      selectList: [],
      isOpen: false,
      defaultList: [],
      tableList: [],
      carList: [
        {
          id: 1,
          label: '帝豪',
          children: [
            {
              id: 1001,
              label: '全球鹰',
              children: [
                { id: 100101, label: '中国龙1.8' },
                { id: 100102, label: '自由舰' },
                { id: 100103, label: '新自由舰1.0' },
                { id: 100104, label: '新自由舰1.5' },
                { id: 100105, label: 'FC' },
                { id: 100106, label: '全新远景1.3T' },
                { id: 100107, label: '全球鹰GC7 1.5L' },
                { id: 100108, label: '全球鹰GX7 1.8L' },
                { id: 100109, label: '全球鹰GX7 2.0L' },
                { id: 1001010, label: 'GX9 2.4L' },
                { id: 1001011, label: '熊猫1.5' },
              ],
            },
            {
              id: 1002,
              label: '英伦',
              children: [
                { id: 1001012, label: 'CE-1' },
                { id: 1001013, label: '新金刚两厢' },
              ],
            },
          ],
        },
      ],
       defaultProps: {
          children: 'children',
          label: 'label'
        }
    };
  },
  props: ['carData'],
  mounted() {
    this.table = this.$refs.table.$refs.pageTable;
  },
  created() {
    this.getvehicleList();
  },
  methods: {
    createdFrom() {
      return [
        {
          type: 'INPUT',
          label: '物料编码',
          fieldName: 'materialCode',
          placeholder: '请输入',
        },
        {
          type: 'SELECT',
          label: '配置',
          fieldName: 'configuration',

          placeholder: '请选择',
          itemList: [{ text: '全部', value: 60011001 }],
          initialValue: 60011001,
        },
        {
          type: 'SELECT',
          label: '选装',
          fieldName: 'optional ',

          placeholder: '请选择',
          itemList: [{ text: '全部', value: 60021001 }],
          initialValue: 60021001,
        },
        {
          type: 'SELECT',
          label: '内饰',
          fieldName: 'upholstery',

          placeholder: '请选择',
          itemList: [{ text: '全部', value: 60031001 }],
          initialValue: 60031001,
        },
        {
          type: 'SELECT',
          label: '外饰',
          fieldName: 'exterior ',
          placeholder: '请选择',
          itemList: [{ text: '全部', value: 60041001 }],
          initialValue: 60041001,
        },
      ];
    },
    createdTable() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 80,
          sorter: true,
          render: (props) => {
            return <span>{props.row.index + 1}</span>;
          },
        },
        {
          title: '选择',
          dataIndex: 'checked',
          sorter: true,
          filter: true,
          filterType: 'checkbox',
          filterItems: [{ text: '' }],
        },
        {
          title: '是否有库存',
          dataIndex: 'stock',
          sorter: true,
          filter: true,
          width: 110,
          filterType: 'checkbox',
          editable: true,
          editType: 'number',
          filterItems: [
            { text: '有', value: 60371001 },
            { text: '无', value: 60371002 },
          ],
          defaultEditable: true,
          onInput: (val, data) => {
            this.changeNum(data);
          },
        },
        {
          title: '物料编码',
          dataIndex: 'materialCode',
          sorter: true,
          filter: true,
          filterType: 'input',
        },
        {
          title: '物料描述',
          dataIndex: 'materialDepict',
          sorter: true,
          filter: true,
          filterType: 'input',
        },

        {
          title: '车型',
          dataIndex: 'model',
          sorter: true,
          filter: true,
          filterType: 'input',
        },
        {
          title: '车系',
          dataIndex: 'demio',
          sorter: true,
          filter: true,
          filterType: 'input',
        },
        {
          title: '配置',
          dataIndex: 'configuration',
          sorter: true,
          filter: true,
          filterType: 'input',
        },
        {
          title: '选装',
          dataIndex: 'optionl',
          align: 'center',
          sorter: true,
          filter: true,
          filterType: 'input',
        },
        {
          title: '内饰',
          dataIndex: 'trimName',
          sorter: true,
          filter: true,
          filterType: 'input',
        },
        {
          title: '外饰',
          dataIndex: 'colorName',
          sorter: true,
          filter: true,
          filterType: 'input',
        },
      ];
    },
    // 获取车型车系
    async getvehicleList() {
      let res = await vehicleConfiguration(0, { isUnlimited: 10041001 });

      // alert(res)
      this.topFilterList.find((item) => item.fieldName === 'brandProductList').itemList = res.data;
    },
    handleNodeClick(data) {
        console.log(data);
      },
    changeHandle(val) {
      this.isOpen = true;
      this.fetchParams = Object.assign({}, this.fetchParams, val);
    },
    SyncTableData(list) {
      if (list.length > 0) {
        this.tableList = list;
      } else {
        this.tableList = [];
      }
    },
    changeNum(val) {
      if (val.orderNum) {
        // 输入内容默认选中 不让其他数据可输入
        this.defaultList = [val];

        if (this.tableList.length > 0) {
          let arr = [];
          this.tableList.map((x) => {
            if (x._uid != val._uid) {
              arr.push(x);
            }
          });
          console.log(arr);
          this.table.SET_CELL_DISABLED(arr, 'orderNum', true);
        }
      } else {
        this.defaultList = [];
        this.table.SET_CELL_DISABLED(this.tableList, 'orderNum', false);
      }
    },
    closeDrawer(type) {
      if (type == 1) {
        this.$emit('close');
      } else {
        let json = this.selectList[0];
        let Rep = /^[1-9]\d*$/;
        if (json.orderNum > 10000000000) {
          this.$notify({
            title: '警告',
            message: '输入数量过大',
            type: 'warning',
          });
          return;
        }
        if (Rep.test(json.orderNum)) {
          this.isOpen = true;
          this.$emit('close', json, this.carData);
        } else {
          this.$notify({
            title: '警告',
            message: '请输入正整数',
            type: 'warning',
          });
          return;
        }
      }
    },
    selectChangeHandle(val) {
      if (val.length > 0) {
        this.selectList = val;
        this.isOpen = false;
      } else {
        this.selectList = val;
        this.isOpen = true;
      }
    },
  },
};
</script>

<style scoped>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
</style>
